* {
  margin: 0;
  padding: 0;
}

body {
  background-color: #cccccc;
}

.all {
  overflow: hidden;
  position: relative;
  width: 210px;
  height: 110px;
  margin: 20px auto;
  padding: 5px;
}

.all .box {
  z-index: 100;
  width: 200px;
  height: 100px;
  padding: 5px;
  background-color: yellowgreen;
}

.all .box::before {
  content: '';
  display: block;
  width: 100px;
  height: 50px;
  position: absolute;
  z-index: -100;
  left: 0px;
  top: 0;
  background-color: burlywood;
  transition: 2s;
  animation: lo 2s linear;
  animation-iteration-count: infinite;
}

@keyframes lo {
  0% {
    left: 0;
    top: 0;
  }
  10% {
    left: 0;
    top: -50px;
  }
  20% {
    left: 200px;
    top: -50px;
  }
  30% {
    left: 200px;
    top: 100px;
  }
  40% {
    left: 0;
    top: 100px;
  }
  50% {
  }
  60% {
    left: 200px;
    top: 95px;
  }
  70% {
  }
  80% {
    left: -100px;
    top: 55px;
  }
  90% {
  }
  100% {
    left: -100px;
    top: 0;
  }
}

.use > diV {
  color: red;
}

.use > diV ~ p {
  color: red;
}

.use > diV ~ p ~ span {
  color: red;
}

.use > diV + p {
  color: pink;
}

.use > diV + span {
  color: salmon;
}

.use p {
  color: blue;
}

.use .p {
  color: yellow;
}

[class="nav"] {
  width: 200px;
  height: 200px;
  background-color: salmon;
}

[class="nav"] [name="call"] {
  width: 50px;
  height: 50px;
  background-color: seagreen;
}

[class="nav"] [name="call"] ~ [data-me="use"] {
  width: 100px;
  height: 50px;
  background-color: snow;
}

[class="nav"] [name="call"] ~ [data-me="use"] ~ [id="we"] {
  width: 100px;
  background-color: turquoise;
}

[class="nav"] .we {
  width: 50px;
  height: 50px;
  background-color: thistle;
}

[class="nav"] [name^='w'] {
  text-align: center;
}

[class="nav"] [name$="e"] {
  line-height: 50px;
  height: 200px;
}

[class="nav"] .we {
  height: 50px;
}

.lo {
  position: relative;
  background-color: #ffffff;
}

.lo > label > [type="checkbox"] {
  visibility: hidden;
  position: absolute;
  left: 10px;
  z-index: -1000;
}

.lo > label > [type="checkbox"]:checked + div {
  background-color: blue;
}

.lo > label > [type="checkbox"]:checked + div::before {
  left: 30px;
}

.lo > label > div {
  position: absolute;
  z-index: 1000;
  background-color: white;
  width: 50px;
  height: 20px;
  border-radius: 10px;
  left: 0;
  top: 0;
  transition: 0.5s;
  /* ~p{
                transition: 0.5s;
                width: 20px;
                height: 20px;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 50%;
                background-color: red;
                z-index: 2000;
            } */
}

.lo > label > div::before {
  content: '';
  display: block;
  transition: 0.5s;
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background-color: red;
  z-index: 2000;
}

@keyframes show {
  0% {
    left: 0;
  }
  100% {
    left: 30px;
  }
}
